<script setup lang="tsx">
import { reactive, ref, unref } from 'vue'
import RoleApi from '@/api/role'
import { useTable } from '@/hooks/web/useTable'
import { Table } from '@/components/Table'
import { ElTag } from 'element-plus'
import { Search } from '@/components/Search'
import { ContentWrap } from '@/components/ContentWrap'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { useRoute } from 'vue-router'
const roleId = ref<any>(useRoute().query.roleId)
const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { pageSize, currentPage } = tableState
    const res = await RoleApi.UnallocatedUser({
      roleId: unref(roleId),
      pageNum: unref(currentPage),
      pageSize: unref(pageSize),
      ...unref(searchParams)
    })
    return {
      list: res.rows || [],
      total: res.total || 0
    }
  }
})

const { dataList, loading, pageSize, total, currentPage } = tableState
const { getList, getElTableExpose } = tableMethods

const crudSchemas = reactive<CrudSchema[]>([
  {
    field: 'selection',
    search: {
      hidden: true
    },
    form: {
      hidden: true
    },
    detail: {
      hidden: true
    },
    table: {
      type: 'selection'
    }
  },
  {
    field: 'index',
    label: '序号',
    form: {
      hidden: true
    },
    search: {
      hidden: true
    },
    detail: {
      hidden: true
    },
    table: {
      type: 'index'
    }
  },
  {
    field: 'userName',
    label: '用户名称',
    search: {
      component: 'Input',
      componentProps: {
        placeholder: '用户名称'
      }
    }
  },
  {
    field: 'nickName',
    label: '用户昵称',
    search: {
      hidden: true
    }
  },
  {
    field: 'status',
    label: '状态',
    search: {
      hidden: true
    },
    table: {
      slots: {
        default: (data: any) => {
          return (
            <>
              <ElTag type={data.row.status == '0' ? 'success' : 'danger'}>
                {data.row.status == '0' ? '正常' : '停用'}
              </ElTag>
            </>
          )
        }
      }
    },
    detail: {
      hidden: true
    }
  },
  {
    field: 'phonenumber',
    label: '手机号',
    search: {
      component: 'Input',
      componentProps: {
        placeholder: '手机号'
      }
    }
  },
  {
    field: 'email',
    label: '邮箱',
    search: {
      hidden: true
    }
  },
  {
    field: 'createTime',
    label: '创建时间',
    search: {
      hidden: true
    }
  }
])

const { allSchemas } = useCrudSchemas(crudSchemas)
const searchParams = ref({})
const setSearchParams = (params: any) => {
  currentPage.value = 1
  searchParams.value = params
  getList()
}
const submit = async () => {
  const elTableRef = await getElTableExpose()
  const selections = elTableRef?.getSelectionRows()
  return selections.map((item) => {
    return item.userId
  })
}
defineExpose({
  submit
})
</script>

<template>
  <ContentWrap>
    <div class="mb-10px">
      <Search
        :schema="allSchemas.searchSchema"
        @search="setSearchParams"
        @reset="setSearchParams"
      />
    </div>
    <Table
      v-model:pageSize="pageSize"
      v-model:currentPage="currentPage"
      :columns="allSchemas.tableColumns"
      row-key="userId"
      :data="dataList"
      :loading="loading"
      :pagination="{
        total
      }"
      @register="tableRegister"
    />
  </ContentWrap>
</template>
<style scoped>
:deep(.el-pagination > .is-last) {
  display: none !important;
}
:deep(.el-table--default .el-table__cell) {
  padding: 4px 0 !important;
}
</style>
